<template>
    <div class="left">
                <!-- <el-transfer v-model="value" :data="data"></el-transfer> -->
        <el-table :data="tableData" border stripe style="width: 100%">
            <el-table-column label="" width="180">
                <el-checkbox></el-checkbox>
            </el-table-column>
            <el-table-column prop="SN" label="控制器ID" width="180">
            </el-table-column>
            <el-table-column prop="room" label="房间"> </el-table-column>
        </el-table>
                <div class="left">
            <el-table :data="tableData" border stripe style="width: 100%">
                <el-table-column label="" width="180">
                    <el-checkbox></el-checkbox>
                </el-table-column>
                <el-table-column prop="SN" label="控制器ID" width="180">
                </el-table-column>
                <el-table-column prop="room" label="房间"> </el-table-column>
            </el-table>
        </div>
        <div>
            <el-button @click="changeLeft()">&gt;&gt;</el-button>
            <el-button @click="changeRight">&lt;&lt;</el-button>
        </div>
        <div class="right">
            <el-table :data="tableData2" border stripe style="width: 100%">
                <el-table-column label="" width="180">
                    <el-checkbox></el-checkbox>
                </el-table-column>
                <el-table-column prop="SN" label="控制器ID" width="180">
                </el-table-column>
                <el-table-column prop="room" label="房间"> </el-table-column>
            </el-table>
        </div>
    </div>
    
</template>
<script>
export default {
    name: "Left",
    data() {
        return {
            tableData: [
                
            ]            // list:[],
            // data:[],
            // value:[]
        };
    },
    created () {
        this.message();
    },
    methods: {
        async message () {
            let {data} = await this.$http.get("/api/control.json")
            console.log(data);
            this.tableData = data;      
        },
                // async mes sage() {
        //     let { data } = await this.$http.get("/api/control.json");
        //     this.list = data;
        //     this.generateData();
        // },
        // generateData () {
        //   const data = [];
        //   var length=this.list.length;
        //   for (let i = 0; i < length; i++) {
        //     data.push({
        //       key: i,
        //       label: `id:${this.list[i].SN} -room:${ this.list[i].room }`
        //     });
        //   }
        //   this.data = data;
        // },
    }
};
</script>
<style  scoped>
.left {
    width: 600px;
    margin: 150px 20px;
}
</style>